<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Document</title>
</head>

<body>
    <div id="progress" role="progressbar" aria-label="progress"></div>
    <main>
        <article class="main-page-content" lang="en-US">
            <header>
                <h1>CSS scroll-driven animations</h1>
            </header>
            <div class="section-content">
                <p>The <strong>CSS scroll-driven animations</strong> module provides functionality that builds on top of
                    the <a href="/en-US/docs/Web/CSS/CSS_animations">CSS animations module</a> and <a
                        href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>. It allows you to animate
                    property values based on a progression along a scroll-based timeline instead of the default
                    time-based document timeline. This means that you can animate an element by scrolling a scrollable
                    element, rather than just by the passing of time.</p>
                <p>There are two types of scroll-based timelines:</p>
            </div>
            <div class="section-content">
                <ul>
                    <li><em>scroll progress timeline</em>: You progress this timeline by scrolling a scrollable element
                        (<em>scroller</em>) from top to bottom (or left to right) and back again. The position in the
                        scroll range is converted into a percentage of progress — 0% at the start and 100% at the end.
                    </li>
                    <li><em>view progress timeline</em>: You progress this timeline based on the change in visibility of
                        an element (known as the <em>subject</em>) inside a scroller. The visibility of the subject
                        inside the scroller is tracked as a percentage of progress — by default, the timeline is at 0%
                        when the subject is first visible at one edge of the scroller, and 100% when it reaches the
                        opposite edge.</li>
                </ul>
                <p>When one of these two timelines is applied to an animated element, the animation progresses along
                    that timeline instead of following the default time-based timeline.</p>
                <p>It is possible to adjust the effective placement of the animation along the scroll progress and view
                    progress timelines, i.e., you can define the position at which the animation starts and ends. This
                    can be done in a couple of different ways:</p>
                <ul>
                    <li>Start and end animation range values can be applied to the animation to adjust the position of
                        the animation's starting and ending position along the timeline.</li>
                    <li>View progress timelines can have a start and/or end inset (or outset) applied to them to adjust
                        the position of the scrollport (see <a href="/en-US/docs/Glossary/Scroll_container">Scroll
                            container</a> for more details) in which the subject element is deemed to be visible. Put
                        another way, this allows you to specify start and/or end inset (or outset) values that offset
                        the position of the timeline itself.</li>
                </ul>
            </div>
            <section aria-labelledby="scroll-driven_animations_in_action">
                <h2 id="scroll-driven_animations_in_action"><a href="#scroll-driven_animations_in_action">Scroll-driven
                        animations in action</a></h2>
                <div class="section-content">
                    <p>You can find several tools and demos showing scroll-driven animations in action at <a
                            href="https://scroll-driven-animations.style/" class="external"
                            target="_blank">Scroll-driven Animations tools and demos</a>.</p>
                </div>
            </section>
            <section aria-labelledby="reference">
                <h2 id="reference"><a href="#reference">Reference</a></h2>
                <div class="section-content"></div>
            </section>
            <section aria-labelledby="properties">
                <h3 id="properties"><a href="#properties">Properties</a></h3>
                <div class="section-content">
                    <p>Set the timeline that will control the progress of an animation, and set its attachment range
                        along that timeline:</p>
                    <ul>
                        <li><a href="/en-US/docs/Web/CSS/animation-timeline"><code>animation-timeline</code></a></li>
                        <li><a href="/en-US/docs/Web/CSS/animation-range"><code>animation-range</code></a></li>
                        <li><a href="/en-US/docs/Web/CSS/animation-range-start"><code>animation-range-start</code></a>
                        </li>
                        <li><a href="/en-US/docs/Web/CSS/animation-range-end"><code>animation-range-end</code></a></li>
                    </ul>
                    <p>Define <em>named scroll progress timelines</em>:</p>
                    <ul>
                        <li><a href="/en-US/docs/Web/CSS/scroll-timeline"><code>scroll-timeline</code></a></li>
                        <li><a href="/en-US/docs/Web/CSS/scroll-timeline-axis"><code>scroll-timeline-axis</code></a>
                        </li>
                        <li><a href="/en-US/docs/Web/CSS/scroll-timeline-name"><code>scroll-timeline-name</code></a>
                        </li>
                    </ul>
                    <p>Define <em>named view progress timelines</em>:</p>
                    <ul>
                        <li><a href="/en-US/docs/Web/CSS/view-timeline"><code>view-timeline</code></a></li>
                        <li><a href="/en-US/docs/Web/CSS/view-timeline-axis"><code>view-timeline-axis</code></a></li>
                        <li><a href="/en-US/docs/Web/CSS/view-timeline-inset"><code>view-timeline-inset</code></a></li>
                        <li><a href="/en-US/docs/Web/CSS/view-timeline-name"><code>view-timeline-name</code></a></li>
                    </ul>
                    <p>Modify timeline scope:</p>
                    <ul>
                        <li><a href="/en-US/docs/Web/CSS/timeline-scope"><code>timeline-scope</code></a></li>
                    </ul>
                </div>
            </section>
            <section aria-labelledby="at-rules">
                <h3 id="at-rules"><a href="#at-rules">At-rules</a></h3>
                <div class="section-content">
                    <p>CSS scroll-driven animations adds the ability to include
                        <code>&lt;timeline-range-name&gt;</code>s in <a
                            href="/en-US/docs/Web/CSS/@keyframes"><code>@keyframes</code></a> blocks, to place keyframes
                        at specific positions inside named timeline ranges.</p>
                </div>
            </section>
            <section aria-labelledby="functions">
                <h3 id="functions"><a href="#functions">Functions</a></h3>
                <div class="section-content">
                    <p>Possible values of the <a
                            href="/en-US/docs/Web/CSS/animation-timeline"><code>animation-timeline</code></a> property
                        for defining <em>anonymous scroll progress timelines</em> and <em>anonymous view progress
                            timelines</em> (i.e. implicitly defined by the browser rather than being explicitly named
                        and defined using the <code>scroll-timeline-*</code> and <code>view-timeline-*</code>
                        properties):</p>
                    <ul>
                        <li><a href="/en-US/docs/Web/CSS/animation-timeline/scroll"><code>scroll()</code></a></li>
                        <li><a href="/en-US/docs/Web/CSS/animation-timeline/view"><code>view()</code></a></li>
                    </ul>
                </div>
            </section>
            <section aria-labelledby="javascript_features">
                <h3 id="javascript_features"><a href="#javascript_features">JavaScript features</a></h3>
                <div class="section-content">
                    <ul>
                        <li><a href="/en-US/docs/Web/API/Element/animate"><code>Element.animate()</code></a></li>
                        <li><a href="/en-US/docs/Web/API/AnimationTimeline"><code>AnimationTimeline</code></a></li>
                        <li><a href="/en-US/docs/Web/API/ScrollTimeline"><code>ScrollTimeline</code></a></li>
                        <li><a href="/en-US/docs/Web/API/ViewTimeline"><code>ViewTimeline</code></a></li>
                    </ul>
                </div>
            </section>
            <h2 id="specifications"><a href="#specifications">Specifications</a></h2>
            <table class="standard-table">
                <thead>
                    <tr>
                        <th scope="col">Specification</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="https://drafts.csswg.org/scroll-animations-1/">Scroll-driven Animations <br></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="https://drafts.csswg.org/css-animations-2/">CSS Animations Level 2<!-- --> <br></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="https://drafts.csswg.org/web-animations-2/">Web Animations Level 2 <br></a></td>
                    </tr>
                </tbody>
            </table>
            <section aria-labelledby="see_also">
                <h2 id="see_also"><a href="#see_also">See also</a></h2>
                <div class="section-content">
                    <ul>
                        <li><a href="https://developer.chrome.com/docs/css-ui/scroll-driven-animations" class="external"
                                target="_blank">Animate elements on scroll with Scroll-driven animations</a> on
                            developer.chrome.com</li>
                        <li><a href="/en-US/docs/Web/CSS/CSS_animations">CSS animations</a></li>
                        <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
                    </ul>
                </div>
            </section>
        </article>
    </main>
</body>

</html>